<template>
	<view class="bindingPhone">
		<div class="headimgurl">
			<imgList hide ref="img" @setimg="setimg" size="200" />
			<u-avatar size="128" :src="avatar_img" @click="$refs.img.upload('setimg')" />
			<!-- <u-avatar :src="form.headimgurl" size="160"></u-avatar> -->
		</div>
		<u-form :model="form" ref="uForm" :rules="rules">
			<!-- 手机号验证码 -->

			<u-form-item label="手机号码" label-width="200" prop="mobile">
				<u-input type="number" v-model="form.mobile" maxlength="11" placeholder="请输入手机号" />
			</u-form-item>
			<u-form-item label-position="left" label="验证码" label-width="200" prop="code">
				<u-input type="number" maxlength="6" placeholder="请输入验证码" v-model="form.code"></u-input>
				<u-button ripple slot="right" type="primary" size="mini" @click="getCode">{{ codeTips }}</u-button>
			</u-form-item>
			<u-form-item label="昵称" label-width="200" prop="nickname">
				<u-input v-model="form.nickname" placeholder="请输入昵称" /></u-form-item>
			<u-form-item label="登录密码" label-width="200" prop="loginpass">
				<u-input type="password" v-model="form.loginpass" placeholder="请输入登录密码" />
			</u-form-item>
			<u-form-item label="地区" label-width="200" prop="area">
				<u-input type="select" v-model="form.area" placeholder="请选择地区" @click="show = true" />
			</u-form-item>

		</u-form>
		<!-- <account-form :customMadeForm="form" ref="uForm" :formData="formData" formHigh="none" :codeType="codeType"
			:rules="rules" @getFormData="getFormData"></account-form> -->
		<!-- 推广 -->
		<u-form-item :border-bottom="false">
			<u-input :clearable="false" v-model="form.regcode" placeholder="请输入邀请码" />
		</u-form-item>
		<div class="bts">
			<u-button type="primary" @click="submit">{{ $t("提交") }}</u-button>
		</div>
		<u-select v-model="show" :list="regionList" mode="mutil-column-auto" @confirm="confirm"></u-select>
		<u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
	</view>
</template>

<script>
import AccountForm from '@/components/AccountForm.vue';
import $config from '@/api/http.baseUrl.js';
export default {
	name: "bindingPhone",
	components: {
		AccountForm,
	},
	data() {
		return {
			show: false,
			regionList: [],
			codeTips: '',
			avatar_img: "",
			codeType: 'bind',
			form: {
				openid: "",
				headimgurl: '',
				headimg: "",
				nickname: "",
				code: "",
				mobile: "",
				loginpass: "",
				register_type: 0,//0=小程序授权，1=微信APP授权
				type: 1,
				area_code: "",
				area: ""
			},
			formData: [
				{
					type: 'primary',
					prop: 'mobile',
					placeholder: '请输入手机号码'
				},
				{
					type: 'code',
					prop: 'code',
					placeholder: '请输入短信验证码'
				},
				{
					type: 'password',
					prop: 'loginpass',
					placeholder: '请设置登录密码'
				},
				{
					type: 'primary',
					prop: 'nickname',
					placeholder: '请输入昵称'
				}
			],
			// 校验
			rules: {
				mobile: [
					{
						required: true,
						message: '请输入手机号',
						// 可以单个或者同时写两个触发验证方式
						trigger: ['change', 'blur']
					},
					{
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// this.$u.test.mobile()就是返回true或者false的
							return this.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						// 触发器可以同时用blur和change
						trigger: ['change', 'blur']
					}
				],
				loginpass: [
					{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					},
					{
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// this.$u.test.mobile()就是返回true或者false的
							return this.$u.test.rangeLength(value, [8, 16]);
						},
						message: '密码需为8~16字符',
						// 触发器可以同时用blur和change
						trigger: ['change', 'blur']
					}
				],
				nickname: [
					{
						required: true,
						message: '请输入昵称',
						trigger: 'blur'
					}
				],
				area: [
					{
						required: true,
						message: '请选择地区',
						trigger: 'blur'
					}
				],
				code: [
					{
						required: true,
						message: '请输入验证码',
						trigger: 'blur'
					},
					{
						validator: (rule, value, callback) => {
							return this.$u.test.code(value, 6);
						},
						message: '请输入正确6位验证码',
						// 触发器可以同时用blur和change
						trigger: 'blur'
					}
				]
			},
		}
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	onLoad(opt) {
		this.form.openid = opt.id
		console.log('this.form.openid: ', this.form.openid);
		// this.getUserInfo()
		this.getRegion()
	},
	methods: {
		setimg(e) {
			this.$u.toast(e.msg)
			this.form.headimgurl = e.id
			this.avatar_img = e.path
		},
		submit() {
			console.log(this.form);
			this.$refs.uForm.validate(valid => {
				if (valid) {
					this.$u.api.bind_mobile(this.form).then(res => {
						console.log(res);
						uni.setStorageSync('token', res.data.token.access_token);
						this.$store.dispatch('websocketInit')
						if (res.code === 1) {
							this.$u.toast(res.msg)
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/mine/index'
								});
							}, 800)
						}
					})
				} else {
					console.log('验证失败');
				}
			})

		},
		getUserInfo() {
			const userInfo = uni.getStorageSync('userInfo');
			const { nickname, headimgurl, openid } = userInfo
			this.form.nickname = nickname
			this.form.headimgurl = headimgurl
			this.form.openid = openid
		},
		// getFormData(form) {
		// 	console.log('form: ', form);
		// 	this.$u.api.bind_mobile(form).then(res => {
		// 		console.log(res);
		// 		if (res.code === 1) {
		// 			this.$u.toast(res.msg)
		// 			setTimeout(() => {
		// 				uni.switchTab({
		// 					url: '/pages/home/index'
		// 				});
		// 			}, 800)
		// 		}
		// 	})
		// },
		getCode() {
			if (this.$refs.uCode.canGetCode) {
				if (!this.form.mobile) {
					this.$u.toast('请输入手机号码！');
					return;
				}
				uni.showLoading({ title: '正在获取验证码' });
				setTimeout(() => {
					this.codeGet();
				}, 500);
			} else {
				this.$u.toast('倒计时结束后再发送');
			}
		},
		codeGet() {
			this.$u.api
				.send_sms({
					mobile: this.form.mobile,
					type: 'bind',
				})
				.then(res => {
					if (res.code === 1) {
						uni.hideLoading();
						this.$u.toast('验证码已发送');
						this.$refs.uCode.start();
					}
				});
		},
		codeChange(text) {
			this.codeTips = text;
		},
		getRegion() {
			this.$u.api.getRegion().then(res => {
				console.log('res: ', res);
				this.regionList = res.data
			})
		},
		confirm(e) {
			this.form.area_code = e.slice(-1)[0].value
			this.form.area = `${e[0].label}/${e[1].label}/${e[2].label}`

		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .u-form-item--right {
	background-color: #f8f8f8;
	border-radius: 20rpx;
	padding: 10rpx;
}

.headimgurl {
	margin-bottom: 50rpx;
	@include flex($aligin: center, $justify: center);
}

.bindingPhone {
	margin: 20rpx 30rpx;
}

.bts {
	margin-top: 60rpx;
}
</style>
